<template>
  <div class="hello">
   <van-tabbar route v-model="active" :border="false" fixed style="background-color:#19181F;" class="page_bottom">
      <van-tabbar-item replace to="/home" name="home" style="background-color:#19181F;">
        <span style="font-size:12px;" :style="active == 'home' ? 'color:#D7C19A;':'color:#707070;'">铸造力</span>
        <template  slot="icon">
          <img :src="require('@/assets/imgs/134124.png')" style="width:24px;height:24px;" v-if="active == 'home'"/>
          <img :src="require('@/assets/imgs/12412.png')" style="width:24px;height:24px;" v-else/>
        </template>
      </van-tabbar-item>

      <van-tabbar-item replace to="/jishou" name="jishou" style="background-color:#19181F;">
          <span style="font-size:12px;" :style="active == 'jishou' ? 'color:#D7C19A;':'color:#707070;'">寄售</span>
          <template slot="icon">
              <img :src="require('@/assets/imgs/jishou1.png')" style="width:24px;height:24px;" v-if="active == 'jishou'"/>
              <img :src="require('@/assets/imgs/jishou2.png')"  style="width:24px;height:24px;" v-else/>
          </template>
      </van-tabbar-item>

      <van-tabbar-item replace to="/nft" name="nft" style="background-color:#19181F;">
          <span style="font-size:12px;" :style="active == 'nft' ? 'color:#D7C19A;':'color:#707070;'">NFT</span>
          <template slot="icon">
            
            <img :src="require('@/assets/imgs/12431234.png')" style="width:24px;height:24px;" v-if="active == 'nft'"/>
              <img v-else :src="require('@/assets/imgs/12341234.png')"  style="width:24px;height:24px;"/>
          </template>
      </van-tabbar-item>
  </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'Tabbar',
  data() {
    return {
      active: 0,
    };
  },
  mounted() {
    if (this.$route.path.indexOf('home') > -1) {
      this.active = 'home'
    } else if (this.$route.path.indexOf('jishou') > -1) {
      this.active = 'jishou'
    } else {
      this.active = 'nft'
    }
  },
  
  
}
</script>


<style scoped>
.page_bottom {
    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2 */
 }
</style>
